<template>
	<view class="content">
		<view class="content_banner">
			<view class="content_banner_avatar">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ff2%2F75%2Ffc%2Ff275fcb8bf59cfdc27045498ed0d6c3e.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645264366&t=85a374443549af3128bdbc2e020b62a8" mode=""></image>
			</view>
			<view class="content_banner_right x_y_between">
				<view>
					<view class="content_banner_right_name">
						爱吃鱼的猫
					</view>
					<view class="content_banner_right_sex">
						男
					</view>
				</view>
			</view>
		</view>
		<view class="content_card">
			<u-cell title="个人设置" :isLink="true"></u-cell>
			<view class="content_card_list x_y_between">
				<view class="flex1" v-for="item in orderType" :key="item.id">
					<view class="x_y_center">
						<u-icon :name="item.icon" size="30"></u-icon>
					</view>
					<view class="x_y_center fz-12 mt-5">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="text-area">
			<text class="title">我的</text>
		</view> -->
		<footer-tab-bar></footer-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType:[
					{
						id:1,
						icon:'clock',
						text:'待使用',
						url:'',
					},{
						id:2,
						icon:'checkmark-circle',
						text:'已完成',
						url:'',
					},{
						id:3,
						icon:'close-circle',
						text:'已取消',
						url:'',
					}
				]
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
	}
</script>
<style lang="scss">
	.content{
		&_banner{
			padding:30rpx 30rpx 70rpx;
			background: #FD4181;
			display: flex;
			&_avatar{
				height: 140rpx;
				width: 140rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 1rpx solid #fff;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&_right{
				width: calc(100% - 140rpx);
				box-sizing: border-box;
				padding-left: 40rpx;
				color: #fff;
				&_name{
					font-size: 40rpx;
					margin-bottom: 20rpx;
				}
				&_sex{
					font-size: 28rpx;
				}
			}
		}
		&_card{
			margin:0 30rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 5rpx 24rpx 0px rgba(226, 232, 241, 0.3);
			padding: 30rpx;
			transform: translateY(-30rpx);
			border-radius: 10rpx;
			.u-cell .u-cell__body{
				padding: 20rpx 0;
			}
			&_list{
				padding-top: 30rpx;
				border-top: 1px solid #f8f8f8;
			}
		}
	}
</style>
